<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈思毓 - 前端开发工程师简历</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <button class="print-button no-print" onclick="window.print()">
        <i class="fas fa-print"></i> 打印简历
    </button>
    <div class="container">
        <header>
            <div class="profile">
                <img src="v1/证件照.jpg" alt="陈思毓的个人照片" class="profile-img">
                <h1>陈思毓</h1>
                <p>前端开发工程师</p>
            </div>
            <div class="contact-info">
                <p><i class="fas fa-phone"></i> 17786995587</p>
                <p><i class="fas fa-envelope"></i> 
                    <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=csy1204_29@qq.com" target="_blank">csy1204_29@qq.com</a>
                </p>
                <p><i class="fab fa-git-alt"></i> <a href="https://gitee.com/cyusiyu/projects" target="_blank">gitee.com/cyusiyu</a></p>
            </div>
        </header>

        <section class="section">
            <h2><i class="fas fa-graduation-cap"></i> 教育背景</h2>
            <div class="content">
                <p><i class="fas fa-university"></i> <strong>海南经贸职业技术学院</strong> - 软件技术专业</p>
                <p><i class="far fa-calendar-alt"></i> 2023.09 - 2026.06</p>
                <p><i class="fas fa-book-open"></i> <strong>主修课程:</strong></p>
                <div class="courses-container">
                    <div class="course-card">
                        <i class="fab fa-html5"></i> Web前端开发
                    </div>
                    <div class="course-card">
                        <i class="fab fa-js"></i> JavaScript高级编程
                    </div>
                    <div class="course-card">
                        <i class="fab fa-react"></i> 前端框架与应用
                    </div>
                    <div class="course-card">
                        <i class="fas fa-mobile-alt"></i> 移动端开发
                    </div>
                    <div class="course-card">
                        <i class="fas fa-database"></i> 前端数据管理
                    </div>
                </div>
            </div>
        </section>

        <section class="section">
            <h2><i class="fas fa-laptop-code"></i> 技能专长</h2>
            <div class="skills">
                <div class="skill-item">
                    <h3><i class="fas fa-code"></i> 前端技术</h3>
                    <ul>
                        <li>HTML5 & CSS3</li>
                        <li>JavaScript/ES6+</li>
                        <li>TypeScript</li>
                        <li>响应式设计</li>
                    </ul>
                </div>
                <div class="skill-item">
                    <h3><i class="fas fa-cubes"></i> 前端框架</h3>
                    <ul>
                        <li>React.js</li>
                        <li>Vue.js</li>
                        <li>Next.js</li>
                        <li>Nuxt.js</li>
                    </ul>
                </div>
                <div class="skill-item">
                    <h3><i class="fas fa-tools"></i> 开发工具</h3>
                    <ul>
                        <li>Webpack/Vite</li>
                        <li>Git/GitHub</li>
                        <li>VS Code</li>
                        <li>Chrome DevTools</li>
                    </ul>
                </div>
                <div class="skill-item">
                    <h3><i class="fas fa-rocket"></i> 其他技能</h3>
                    <ul>
                        <li>RESTful API</li>
                        <li>前端性能优化</li>
                        <li>单元测试</li>
                        <li>CI/CD基础</li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="section">
            <h2><i class="fas fa-project-diagram"></i> 项目经验</h2>
            <div class="content">
                <h3><i class="fas fa-laptop"></i> 学生管理系统前端开发</h3>
                <p><i class="far fa-calendar-alt"></i> <strong>项目时间:</strong> 2024.03 - 2024.08</p>
                <p><i class="fas fa-info-circle"></i> <strong>项目描述:</strong> 该学生管理系统为学校提供全面的学生信息管理功能，包括学生档案管理、成绩管理等。前端界面需要与后端 API 交互，实现数据的实时展示和更新。</p>
                <p><i class="fas fa-user-tie"></i> <strong>个人职责:</strong> 负责前端页面的设计与开发，优化数据交互流程，提高系统响应速度。参与系统的测试工作，修复发现的前端问题。</p>
            </div>
            <div class="content">
                <h3><i class="fas fa-globe"></i> 海南旅游网站开发</h3>
                <p><i class="far fa-calendar-alt"></i> <strong>项目时间:</strong> 2024.09 - 2024.12</p>
                <p><i class="fas fa-info-circle"></i> <strong>项目描述:</strong> 海南旅游网站旨在为游客提供全面的海南旅游信息，包括景点介绍、酒店预订、旅游线路推荐等功能。需要实现响应式设计，以适应不同设备的访问。</p>
                <p><i class="fas fa-user-tie"></i> <strong>个人职责:</strong> 参与网站的前端开发，使用 HBuilder X 进行页面搭建，实现景点详情页的动态数据展示和交互效果。负责优化页面加载速度。</p>
            </div>
        </section>

        <section class="section">
            <h2><i class="fas fa-trophy"></i> 获奖情况</h2>
            <div class="content">
                <ul>
                    <li><i class="fas fa-award"></i> 2024年新生代理班主任</li>
                    <li><i class="fas fa-award"></i> 2024年优秀学生干部</li>
                    <li><i class="fas fa-award"></i> 2024年学院奖学金二等奖</li>
                </ul>
            </div>
        </section>

        <section class="section">
            <h2><i class="fas fa-user-edit"></i> 自我评价</h2>
            <div class="self-intro">
                <p>作为一名充满激情的前端开发学习者，我具备扎实的 HTML/CSS/JavaScript 基础，熟悉 React 和 Vue 等主流框架。在校期间通过多个项目实践积累了丰富的开发经验，能够独立完成响应式网页开发和性能优化。</p>
                
                <p>我特别注重代码质量和用户体验，善于将设计转化为高效、优雅的代码实现。在团队合作中，我展现出良好的沟通能力和责任心，曾担任新生代理班主任并获得优秀学生干部称号。</p>
                
                <p>持续学习是我的座右铭，我定期关注前端技术动态，并通过 GitHub 等技术社区与同行交流。对前端工程化、性能优化和新兴技术充满探索热情，期待在实战项目中不断提升自己的技术水平。</p>
            </div>
        </section>

        <footer>
            <p>© 陈思毓 . 版权所有.</p>
        </footer>
    </div>

    <script>
        // 打印前优化
        window.onbeforeprint = function() {
            // 可以在这里添加打印前的处理逻辑
            console.log('准备打印...');
        };
        
        window.onafterprint = function() {
            // 打印完成后可以执行的操作
            console.log('打印完成');
        };
    </script>

</body>
</html>    